import React, { PureComponent } from 'react';

function logRenderTime(WrapperCpn) {
  return class extends PureComponent {
    UNSAFE_componentWillMount() {
      this.begin = Date.now()
    }
    componentDidMount() {
      this.end = Date.now()
      const interval = this.end - this.begin
      console.log(`${WrapperCpn.name}渲染时间：${interval}`);
    }
    render() {
      return <WrapperCpn {...this.props}/>
    }
  }
}

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home</h2>
        <p>我是Home的元素</p>
      </div>
    )
  }
}

class About extends PureComponent {
  render() {
    return <h2>About</h2>
  }
}
const LogHome = logRenderTime(Home)
const LogAbout = logRenderTime(About)
class App extends PureComponent {
  render() {
    return (
      <div>
        <LogHome/>
        <LogAbout/>
      </div>
    );
  }
}

export default App;
